<template>
    <el-dialog v-model="props.modJob" :title="props.type=='add'?'添加定时任务':'修改定时任务'" @close="close" style="width: 30%">
        <el-form ref="dataForm" :rules="rules" :model="form" label-width="100px" align="center">
            <el-form-item label="任务名称" prop="name">
                <el-input v-model="form.name"/>
            </el-form-item>
            <el-form-item label="任务编码" prop="code">
                <el-input v-model="form.code"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="form.status" placeholder="请选择">
                    <el-option label="开启" :value = "1+''" />
                    <el-option label="关闭" :value = "0+''" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button v-show='props.type=="add"' type="primary" plain  @click="addJob">添加</el-button>
                <el-button v-show="props.type=='edit'" type="primary" plain  @click="updateJob">更新</el-button>
                <el-button @click="close" type="primary" plain >取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onUpdated} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    const  emits = defineEmits(['close','reload'])

    let dataForm = ref(null)
    let props = defineProps(['modJob','type','id'])
    let form = reactive({})
    const rules = reactive({
            name: [{required: true,message: '请输入任务名称', trigger: 'blur'},],
            code: [{required: true,message: '请输入任务编码', trigger: 'blur'},],
            remark: [{required: true,message: '请输入备注', trigger: 'blur'},],
            executing: [{required: true,message: '请输入状态1开启，0关闭', trigger: 'blur'},],
    })
    onUpdated(function () {
        if(props.modJob==true){
            if(props.type=='edit'){
                request.get(`/api/job/getJobById/${props.id}`).then(resp => {
                    for(let key in resp){
                        form[key] = resp[key]
                    }
                })
            }else if(props.type=="add"){
                for(let key in form){
                    delete form[key]
                }
            }
        }
    })

    function close(){
        emits("close")
        dataForm.value.resetFields()//重置表单校验
    }

    function addJob(){

        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/job/add",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '添加成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateJob(){

        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/job/update",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
</script>

<style scoped>

</style>